<template>
  <view>
    <template
      v-if="
        settings.customer && settings.customer.phoneUsers && settings.customer.phoneUsers.length > 0
      "
    >
      <button
        class="customer-btn"
        @click="showDialog = true"
      >
        <slot></slot>
      </button>

      <dialog-x
        title="电话客服列表"
        :visible.sync="showDialog"
      >
        <view
          class="customer"
          :style="[globalStyle]"
        >
          <view
            v-for="(item, index) in settings.customer.phoneUsers"
            :key="index"
            class="customer-item"
            @click="callPhone(item.phone)"
          >
            <view> <text class="iconfont icon-user-fill mr-10"></text>{{ item.name }}</view>
            <view>{{ item.phone }} <text class="iconfont icon-telephone ml-10"></text></view>
          </view>
        </view>
      </dialog-x>
    </template>
    <template v-else>
      <button
        class="customer-btn"
        @click="callPhone(settings.base.phone)"
      >
        <slot></slot>
      </button>
    </template>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        showDialog: false,
      };
    },

    methods: {},
  };
</script>

<style lang="scss" scoped></style>
